﻿<script setup lang="ts" name="ClickOutSide">
import { storeToRefs } from 'pinia'
import { useAppStoreWithOut } from '@/store/modules/app'

const appStore = useAppStoreWithOut()
const { systemConfig } = storeToRefs(appStore)

const text = ref('点击查看变化')

const handleClickOutside = () => {
  text.value = '点击外部区域'
}

const innerClick = () => {
  text.value = '点击内部区域'
}
</script>

<template>
  <PageWrap>
    <el-space :size="systemConfig.space" fill direction="vertical">
      <el-card shadow="never" class="no-border no-radius">
        <p>可以点击色块内与色块外的任意地方查看变化</p>
        <ClickOutSide class="flex justify-center" @clickOutside="handleClickOutside">
          <div class="inner-box" @click="innerClick">
            {{ text }}
          </div>
        </ClickOutSide>
      </el-card>
    </el-space>
  </PageWrap>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}

.no-border {
  border: none;
}

.no-radius {
  border-radius: 0;
}

.el-card {
  display: flex;

  :deep(.el-card__body) {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    p {
      margin-bottom: var(--el-space);
    }
  }
}

.inner-box {
  display: flex;
  width: 300px;
  height: 300px;
  font-size: 24px;
  color: var(--el-color-white);
  background-color: var(--el-color-primary);
  border-radius: 10px;
  align-items: center;
  justify-content: center;
}
</style>
